<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>欢迎登录</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="js/security.js"></script>
		<script src="js/router.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div id="app">
			<div class="header">				
				<img id="headerImg" :src="header" />
				<div class="header_text_container">
					<h1>计算机与通信工程学院-生活部</h1>
				</div>
			</div>
			<el-container>
				<el-main>
					<div class="form_container">
						<el-form :model="form" label-width="80px" :rules="formRules" ref="form">
							<el-form-item label="账号" prop="account">
								<el-input v-model="form.account"></el-input>
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input type="password" v-model="form.password"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm('form')">提交</el-button>
								<el-button>重置</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-main>
			</el-container>
			<el-dialog title="提示" :visible="wrongDialog.visiable" width="30%" :before-close="handleDialogClose">
				<span>{{wrongDialog.msg}}</span>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="wrongDialog.visiable = false">确定</el-button>
				</span>
			</el-dialog>
		</div>
	</body>
	
	<script>
		
		var validateAccount = (rule, value, callback) => {
			var pattern = /^[\d]{1,20}$/;
			if (value === "") {
				callback(new Error("账号不能为空！"));
			}else if (!pattern.test(value)) {
				callback(new Error("账号为1-20位数字！"));
			} else {
				callback();
			}	
		}
		
		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error("密码不能为空！"));
			} else {
				callback();
			}
		}
		
		
		
		new Vue({
			el: "#app",
			data: {
				header: router.host + "/static/jsjytxgcxy.jpg",
				form: {
					account: "",
					password: "",
				},
				formRules: {
					account: [
						{validator: validateAccount, trigger: "blur"},
					],
					password: [
						{validator: validatePass, trigger: "blur"},
					]
				},
				wrongDialog: {
					visiable: false,
					msg: "",
				}
			},
			methods: {
				submitForm(formName) {
					var that = this;
					this.$refs[formName].validate((valid) => {
						if (valid) {
							const encryPass = security.md5(that.form.password);
							const account = that.form.account;
							axios({
								method: "POST",
								url: router.host + router.managerLogin,
								data: {
									account: account,
									password: encryPass,
								},
								headers: {
									'content-type': 'application/json;charset=UTF-8'
								}
							}).then(function(res) {
								let data = res.data;
								console.log(data.code);
								if (data.code == 200) {
									localStorage.setItem("user", data.data.userModal);
									// 重定向到管理页
									window.location.href = "manage.html";
								} else if (data.code == 504) {
									that.wrongDialog.msg = "您没有权限访问！";
									that.wrongDialog.visiable = true;
								} else {
									that.wrongDialog.msg = "账号或密码错误！";
									that.wrongDialog.visiable = true;
								}
							}).catch(function(errMsg) {
								console.log(errMsg);
							})
						}
					})
				},
				handleDialogClose(done) {
					done();
				}
			}
		})
		
	</script>
</html>
